<template>
  <div>
    <div v-for="item in infolist" :key="item.id">
      <p>{{item.title}}</p>
      <p>{{item.time}}</p>
      <p>{{item.imgurl}}</p>
    </div>

    <!-- 缩略图区域 -->
    <div class="dvlist">
        <vue-preview :slides="list"></vue-preview>
    </div>
    <div class="dv2"></div>
    
    <!-- <img
      class="preview-img"
      v-for="(item,index) in list"
      :key="item.id"
      :src="item.imgurl"
      height="100"
      @click="$preview.open(index,list)"
    /> -->

    <pinglun></pinglun>
  </div>
</template>
<script>
import pinglun from "./pinglun.vue";

export default {
  data() {
    return {
      infolist: [],
      list:[]
    };
  },
  created() {
    this.getphotoinfo();
    this.getpic();
  },
  methods: {
    getphotoinfo() {
      this.$http.get("https://api.oioweb.cn/api/biying.php").then(result => {
        this.infolist = result.body.data;
      });
    },
    getpic() {
      //获取轮播图数据的方法
      this.$http.get("https://api.oioweb.cn/api/biying.php").then(result => {
        // console.log(result.body);
        if (result.body.code == 1) {
          console.log("获取数据轮播图数据成功");
          result.body.data.forEach(item => {
              item.w=600;
              item.h=400;
              item.src=item.imgurl;  //大图地址
              item.msrc=item.imgurl; //小图地址
          });
          this.list = result.body.data;
        } else {
          console.log("获取数据轮播图数据成功");
          Toast("获取数据轮播图数据成功");
        }
      });
    }
  },
  components: {
    pinglun: pinglun
  }
};
</script>
<style scoped>

</style>